<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="450px"
    @closed="closed"
    >

    <div class="form-drawer__content">


      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;" >
        <el-form-item label-width="100px" label="场景ID" prop="id">
          <el-input v-model="formData.id" placeholder="" autocomplete="off" readonly="" />
        </el-form-item> 

        <el-form-item :label-width="formLabelWidth" label="场景名称" prop="name">
          <el-input v-model="formData.name" placeholder="场景名称" autocomplete="off" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="场景包路径" prop="zipFile">
          <el-input v-model="formData.zipFile" placeholder="场景包路径" autocomplete="off" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="Exe路径" prop="exeFilePath">
          <el-input v-model="formData.exeFilePath" placeholder="Exe路径" autocomplete="off" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="帧率" prop="frameRate">
          <el-input placeholder="帧率" v-model="formData.frameRate" type="number" min=24 max=60>
            <template slot="append">FPS</template>
          </el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="预设分辨率" prop="resX">
          <el-input-number v-model="formData.resX" :min="200" :max="7680" label="宽度(px)" style="margin-right: 5px; width: 150px;" />
          <el-input-number v-model="formData.resY" :min="200" :max="7680" label="高度(px)" style="width: 150px;" />
        </el-form-item>

<!--        <el-form-item :label-width="formLabelWidth" label="自适应屏幕" prop="isForceres">
          <el-switch
            v-model="formData.isForceres"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item> -->

        <el-form-item :label-width="formLabelWidth" label="场景封面" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            action=""
            ref="upload"
            :auto-upload="false"
            :show-file-list="false"
             :on-change="handleChange"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item v-if="formData.id!=''" :label-width="formLabelWidth" label="场景大小" prop="size">
          <el-input v-model="formData.size" placeholder="场景大小" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item v-if="formData.id!=''" :label-width="formLabelWidth" label="场景版本" prop="version">
          <el-input v-model="formData.version" placeholder="场景版本" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item v-if="formData.id!=''" :label-width="formLabelWidth" label="更新时间" prop="updateTime">
          <el-date-picker
          disabled
          style="width: 100%;"
            v-model="updateTime"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

<!--        <el-form-item :label-width="formLabelWidth" label="备注" prop="remark">
          <el-input v-model="formData.remark"  :rows="3" type="textarea" placeholder="备注(250字符内)." />
        </el-form-item> -->
      </el-form>

      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </div>

  </el-drawer>
</template>




<script>
  import {
    saveScene,
    getSceneTypes
  } from '@/api/biz/scene'
  export default {
    name: 'InfoDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.name = value.data.name || ''
            this.formData.size = value.data.size || 0.00
            this.formData.remark = value.data.remark || ''
            this.formData.exeFilePath = value.data.exeFilePath || ''
            this.formData.version = value.data.version || 0.00
            this.formData.frameRate = value.data.frameRate || 24
            this.formData.isForceres = value.data.isForceres || '1'
            this.formData.zipFile = value.data.zipFile || ''


            this.formData.resX = value.data.resX || 1920
            this.formData.resY = value.data.resY || 1080
            this.updateTime = value.data.updateTime || ''

            if(value.data.id){
              this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id
            }
          } else {
            this.formData.id =''
            this.formData.name = ''
            this.formData.size = 0.00
            this.formData.remark = ''
            this.formData.exeFilePath =''
            this.formData.version =0.00
            this.formData.frameRate = 24
            this.formData.isForceres = value.data.isForceres || '1'
            this.formData.resX = 1920
            this.formData.resY = 1080
            this.formData.zipFile=  ''
            this.imageUrl=''
            this.updateTime =''
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新建场景'
            }
            if (value.type === '1') {
              this.title = '编辑场景'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        formData: {
          id: '',
          name: '',
          size:0.00,
          version:0.00,
          isForceres:'1',
          exeFilePath:'',
          remark: '',
          zipFile:'',
          frameRate:24,
          resX:1920,
          resY:1080,
          file:null
        },
        formLabelWidth:'100px',
        updateTime:null,
        imageUrl: '',
        options:[],
        rules: {
          name: [{
            required: true,
            message: '请输场景名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          frameRate: [{
            required: true,
            message: '请输入帧率.',
            trigger: 'blur'
          }
          ],
          resX: [{
            required: true,
            message: '请输入宽度(px).',
            trigger: 'blur'
          }
          ],
          resY: [{
            required: true,
            message: '请输入高度(px).',
            trigger: 'blur'
          }
          ],
          exeFilePath: [{
            required: true,
            message: '请输入场景Exe路径.',
            trigger: 'blur'
          }
          ],
          zipFile: [{
            required: true,
            message: '请输入场景包路径.',
            trigger: 'blur'
          }
          ],
          desc: [{
              min: 0,
              max: 250,
              message: '长度在 0 到 250 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
    },
    methods:{
      getSceneTypes: function() {
        getSceneTypes().then(rsp => {
          if(200==rsp.code){
            this.options=rsp.result.items
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            saveScene(this.formData).then(rsp => {
              if(200==rsp.code){
                this.$message({
                  type: 'success',
                  message:rsp.message
                })
              }
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      handleChange(file, fileList) {
        this.formData.file=file.raw;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>


<style lang="scss">

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 240px  !important;
    height: 180px  !important;
    line-height: 180px !important;
    text-align: center;
    border-radius: 10px;
  }
  .avatar {
    width: 240px !important;
    height: 180px !important;
    display: block;
    border-radius: 10px;
  }

</style>
